<div class="row" style=" margin-top:10px; height: 50px;">
	<div class="col-md-6" style="margin-bottom: 10px;">
		<span style="font-size: 30px;font-weight: bold;">{{app}} 实时监控</span>
	</div>
	<div class="col-md-6">
		<div class="pagination-footer" style="margin-top:35px;float:right;font-size:12px;">
			<dir-pagination-controls boundary-links="true" template-url="app/views/pagination.tpl.html" pagination-id="servicesPagination"
									 on-page-change="pageChanged(newPageNumber)">
			</dir-pagination-controls>
			<div class="tools" style="">
				<span>找到 {{emptyObjs.length}} 条结果, </span>
				<span>
              每页 {{servicePageConfig.pageSize}} 条,
					<!--每页-->
					<!--<input class="form-control" ng-model="servicePageConfig.pageSize" ng-change="pageSizeChanged()">-->
					<!--条记录,-->
           				 </span>
				<span>当前 {{servicePageConfig.currentPageIndex}} / {{servicePageConfig.totalPage}} 页</span>
			</div>
			<!-- .tools -->
		</div>
	</div>
</div>

<div class="separator"></div>
<div class="container-fluid">
	<div class="row" style="margin-top: 20px; margin-bottom: 20px;">
		<div class="col-md-12">
			<div class="card" style="border:0px">
				<div class="inputs-header">
          <span class="brand" style="font-size: 13px;cursor: pointer">
            <i class="fa fa-sort-amount-asc" aria-hidden="true" ng-show="!isDescOrder" ng-click="setDescOrder()"></i>
            <i class="fa fa-sort-amount-desc" aria-hidden="true" ng-show="isDescOrder" ng-click="setAscOrder()"></i>
            {{metricTypeDesc}}&nbsp;&nbsp; <label id="showSelectedTime"></label>
			  &nbsp;<img src="./assets/img/loading.gif" data-ng-show="loading">
          </span>

					<button class="btn btn-primary" style="float: right;margin-right: 10px;height: 30px;font-size: 12px;"
							data-disabled="!loading" data-ng-show="display" data-ng-click="searchService()">
						<span class="spinner-border spinner-border-sm"></span>
						查询
					</button>

					<!--<button class="btn btn-outline-primary" style="float: right;margin-right: 10px;height: 30px;font-size: 12px;" ng-click="setDescOrder()"
							ng-if="!isDescOrder">降序</button>

					<button class="btn btn-outline-primary" style="float: right;margin-right: 10px;height: 30px;font-size: 12px;" ng-click="setAscOrder()"
							ng-if="isDescOrder">升序</button>-->


					<!--<div class="form-group" style="float: right;margin-right: 10px;" ng-show="quick">
						<label id="showSelectedTime"></label>
						&nbsp;&nbsp;
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(1, 60)">+1h</button>
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(1, 30)">+30m</button>
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(1, 5)">+5m</button>
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(0, 0)">now</button>
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(-1, 5)">-5m</button>
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(-1, 30)">-30m</button>
						<button type="button" class="btn btn-default" ng-click="quickOnSetTime(-1, 60)">-1h</button>
					</div>-->

					<div class="dropdown form-group dropdown-end-parent"
						 style="width: 195px;float: right;margin-right: 10px;" ng-show="custom">
						<a class="dropdown-toggle" style="text-decoration:none;"
						   id="dropdownEnd" role="button" data-toggle="dropdown" data-target=".dropdown-end-parent">
							<div class="input-group date">
								<input type="text" class="form-control" id="endTime"
									   data-ng-model="dateRangeEnd" placeholder="结束时间">
								<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
							</div>
						</a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
							<datetimepicker
								data-ng-model="dateRangeEnd"
								data-datetimepicker-config="{ dropdownSelector: '#dropdownEnd', renderOn: 'start-date-changed', modelType: 'YYYY-MM-DD HH:mm:ss', startView: 'minute' }"
								data-on-set-time="endDateOnSetTime(newDate, oldDate)"
								data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
						</ul>
					</div>

					<div class="dropdown form-group dropdown-start-parent"
						 style="width: 195px;float: right;margin-right: 10px;" ng-show="custom">
						<a class="dropdown-toggle" style="text-decoration:none;"
						   id="dropdownStart" role="button" data-toggle="dropdown" data-target=".dropdown-start-parent">
							<div class="input-group date">
								<input type="text" class="form-control" id="startTime"
									   data-ng-model="dateRangeStart" placeholder="开始时间">
								<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
							</div>
						</a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
							<datetimepicker data-ng-model="dateRangeStart"
											data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed', modelType: 'YYYY-MM-DD HH:mm:ss', startView: 'hour' }"
											data-on-set-time="startDateOnSetTime(newDate, oldDate)"
											data-before-render="startDateBeforeRender($dates)"></datetimepicker>
						</ul>
					</div>

					<select class="form-control" id="refreshInterval"
							style="height:30px;width: 100px; max-width: 100px !important;"
							ng-model="selectedItem"
							ng-init="selectedItem = refreshItems[0]"
							ng-change="onRefreshIntervalChange(selectedItem)"
							ng-options="x.text for x in refreshItems">
					</select>

					<input class="form-control witdh-200" placeholder="关键字" ng-model="serviceQuery" ng-change="searchService()"
						   style="margin-right: 10px;">

					<div class="form-group" style="float: right;margin-right: 10px;margin-top:5px;" ng-show="quick">
						[<a ng-click="quickOnSetTime(-1, 1440)">-1d</a>]
						[<a ng-click="quickOnSetTime(-1, 60)">-1h</a>]
						[<a ng-click="quickOnSetTime(-1, 5)">-5m</a>]
						[<a ng-click="quickOnSetTime(1, 5)">+5m</a>]
						[<a ng-click="quickOnSetTime(1, 60)">+1h</a>]
						[<a ng-click="quickOnSetTime(1, 1440)">+1d</a>]
						[<a ng-click="quickOnSetTime(0, 0)">now</a>]
					</div>
				</div>
				<!--.tools-header -->

				<!--<div id="g2container"></div>-->
				<div class="card-body" style="padding: 5px 15px !important;">
					<div class="row" style="padding: 0px 0px;">
						<div class="card-body" style="padding: 0px 0px;">
							<div class="col-md-12" ng-repeat="metric in metrics" style="padding-left: 10px;padding-right: 10px;">

								<span ng-if="$index == metrics.length-1" ng-init="initAllChart()"></span>
								<div class="card" style="margin-bottom:20px;" ng-if="$index < metrics.length-1">
									<div class="tools-header" style="height: 45px;">
										<span class="brand" style="font-weight:normal;;word-break:break-all;word-wrap:break-word;">&nbsp{{metric.resource}}</span>
										<a ng-href="">
											<i class="fa fa-align-justify"></i>
										</a>
									</div>
									<!-- .tools-header -->

									<div class="card-body">
										<div class="row">
											<div class="col-md-7">
												<!--<div ng-if="$index != metrics.length-1" id="chart{{$index}}"></div>-->
												<!--<div ng-if="$index == metrics.length-1" id="chart{{$index}}" ng-init="initAllChart()"></div>-->
												<div id="chart{{$index}}"></div>
											</div>
											<div class="col-md-5">
												<table class="table table-hover table-striped table-bordered">
													<thead>
													<tr style="font-size: 13px;text-align:center;font-weight: bold;">
														<td style="white-space: nowrap;word-break:
														keep-all;">时间</td>
														<td style="white-space: nowrap;word-break: keep-all;" title="通过 QPS (pass qps)">通过QPS</td>
														<td style="white-space: nowrap;word-break: keep-all;" title="拒绝 QPS (blocked qps)">拒绝QPS</td>
														<td style="white-space: nowrap;word-break:
														keep-all;" title="RT: 平均响应时间（毫秒）">响应时间(ms)</td>
													</tr>
													</thead>
													<!-- thead -->
													<tbody>
													<tr style="font-size: 12px;text-align:center;" ng-repeat="tableObj in metric.shortData">
														<td style="white-space: nowrap;word-break: keep-all; ">{{tableObj.timestamp | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
														<td style="white-space: nowrap;word-break: keep-all; ">{{tableObj.passQps | number : 1}}</td>
														<td style="white-space: nowrap;word-break: keep-all; ">{{tableObj.blockQps | number : 1}}</td>
														<td style="white-space: nowrap;word-break: keep-all;">{{tableObj.rt | number : 1}}</td>
													</tr>
													<tr style="font-size: 12px;text-align:center;" ng-repeat="_tr in [] | range : (6 - metric.shortData.length)">
														<td ng-repeat="_td in [] | range : 4">-</td>
													</tr>
													</tbody>
													<!-- tbody -->
												</table>
											</div>
										</div>
									</div>
									<!-- .card-body -->
								</div>
								<!-- .card -->
							</div>
							<!-- .col-md-6 -->

						</div>
						<!-- .card-body -->
					</div>
					<!-- .row -->
				</div>

				<div style="display:none;">
					<li dir-paginate="empty in emptyObjs| itemsPerPage : servicePageConfig.pageSize" current-page="servicePageConfig.currentPageIndex"
						pagination-id="servicesPagination"></li>
				</div>


				<!-- pagination-footer -->
				<!--<div class="row" style="margin-bottom:20px"></div>-->
			</div>
			<!-- .card -->
		</div>
		<!-- .col-md-12 -->
	</div>
	<!-- -->
</div>
